<script setup name="DictTag">
import {reactive} from "vue";
const props = defineProps({
  // 数据
  options: {
    type: Array,
    default: null,
  },
  // 当前的值
  value: [Number, String],
  labelName: {
    type: String,
    default: "name",
  },
  labelValue: {
    type: String,
    default: "code",
  }
});

let pd = reactive({
  dataText: "",
  dataKey: 0,
  reParams: [],
  elTagType: "",
  elTagClass: "",
  queryParams: {
    id: null
  }
});

watch(() => props.options, val => {
  initTag();
}, {deep: true, immediate: true});

watch(() => props.value, val => {
  initTag();
}, {deep: true, immediate: true});

// 初始化3、4样式的展示
function initTag() {


  if (props.options && props.value) {
    //如果循环没有找到对应的值，那就显示原本的key
    pd.dataText = props.value;
    pd.elTagClass =  props.options.elTagClass;
    pd.elTagType =  props.options.elTagType;
    props.options.some((item, index) => {
      if (item[props.labelValue] == props.value) {
        pd.elTagClass =  props.options.elTagClass;
        pd.elTagType =  props.options.elTagType;
        pd.dataText = item[props.labelName];
        return true;
      }
    });
  }
}

</script>

<template>
  <el-tag :type="pd.elTagType" :class="pd.elTagClass" effect="plain">{{ pd.dataText }}</el-tag>
</template>
